<template>
  <div class="main">
    <div id="pie"></div>
    <div id="line"></div>
  </div>
  <!-- 设置挂载点 -->
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
  },
})
let pieArr = []
let lineArr = []
props.data.map((mapItem) => {
  if (pieArr.length == 0) {
    pieArr.push({ name: mapItem['事件类型'], value: 1 })
  } else {
    let res = pieArr.some((item) => {
      //判断相同的部门，有就添加到当前项
      if (item.name == mapItem['事件类型']) {
        item.value += 1
        return true
      }
    })
    if (!res) {
      //如果没找相同的部门添加一个新对象
      pieArr.push({ name: mapItem['事件类型'], value: 1 })
    }
  }
})
props.data.map((mapItem) => {
  if (lineArr.length == 0) {
    lineArr.push({ name: mapItem['发生时间'].slice(5, 7), value: 1 })
  } else {
    let res = lineArr.some((item) => {
      //判断相同的部门，有就添加到当前项
      if (item.name == mapItem['发生时间'].slice(5, 7)) {
        item.value += 1
        return true
      }
    })
    if (!res) {
      //如果没找相同的部门添加一个新对象
      lineArr.push({ name: mapItem['发生时间'].slice(5, 7), value: 1 })
    }
  }
})
function sortrule(a, b) {
  return a.name - b.name
}
lineArr.sort(sortrule)

import { onMounted } from 'vue'
// 引入依赖
import * as echarts from 'echarts'
// 饼状图

var pieOption = {
  title: {
    text: '事故类型数目统计图',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '7%',
    left: 'center',
  },
  series: [
    {
      name: '该类型事件个数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: pieArr,
    },
  ],
}

var lineOption = {
  title: {
    text: '每月事故数量统计图',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: lineArr.map((item) => item.name + '月'),
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '事件个数',
      type: 'line',
      stack: 'Total',
      areaStyle: {
        color: '#660066',
      },
      emphasis: {
        focus: 'series',
      },
      data: lineArr.map((item) => item.value),
    },
  ],
}

onMounted(() => {
  var pieChartDom = document.getElementById('pie')
  var pieChart = echarts.init(pieChartDom)
  var lineChartDom = document.getElementById('line')
  var lineChart = echarts.init(lineChartDom)
  pieOption && pieChart.setOption(pieOption)
  lineOption && lineChart.setOption(lineOption)
})
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-around;
}
#pie {
  width: 400px;
  height: 400px;
}
#line {
  width: 400px;
  height: 400px;
}
</style>
